<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>具体的样式</title>
    <style>
        /*
            文本样式：  px像素单位
                字体/颜色/粗细/缩进/字体风格/字体装饰/字体对齐/尺寸
            font-family/color/font-weight/text-indent/font-style/text-decoration/text-align/font-size
        */
        .one {
            /*设置字体*/
            font-style: italic;/*它是斜体的*/
            font-family: 仿宋;
            font-size: 2em;
            font-weight: bolder;
            color: yellowgreen;
            text-decoration: none;/*删除线*/
            height: 300px;
            width: 300px;
            border: 1px solid red;
            /*水平居中*/
            text-align: center;
        }
        p {
            color: red;
            /*使用连写形式*/
            font: italic 20px bolder ;
            /*  em  指的是标签内的文本尺寸的大小
                     2em指的是两倍的文本尺寸大小
               text-indent   文本缩进
            */
            text-indent: 2em;
        }

        .two {
            /*背景相关样式
               背景颜色/背景图像/背景图像尺寸/背景图像平铺方式/背景图像位置/背景图像关联方式
               background-color/image--url(路径)/size/repeat/position/attachment
            */
            height: 1300px;
            width: 300px;
            border: 1px solid red;
            /*背景颜色*/
            background-color: greenyellow;
            /*背景图像  从左上角开始往右下角依次剪切*/
            /*图片压缩*/
            background-image: url(../img.png);
            /*background-size 设置图片的尺寸 水平方向  垂直方向*/
            /*background-size: 100% 100%;*/
            /*去掉重复复制*/
            /*background-repeat: repeat;*/
            /*在图片不重复的情况下，填充整个标签的区域 拉伸*/
            /*相对于当前所在的标签*/
            /*background-size: 100% 100%;*/
            background-repeat: no-repeat;
            background-position:50px 50px;
            background-attachment: scroll;/*fixed固定的*/
        }
        .three {
            /* 边框   支持连写
                border-color/width/style/radius
            */
            height: 300px;
            width: 500px;
            border: 2px dotted purple;
            border-left: 2px dashed greenyellow;
            border-radius: 50%;/*四角  每一个角单独设置*/
        }

        .four {
            height: 300px;
            width: 300px;
            border: 5px solid red;
        }

    </style>
</head>
<body>
    <div class="four">这是第四个div标签</div>
    <!--<div class="three">这是第三个div标签</div>
    <div class="two">这是第二个div标签</div>
    <div class="one">这是一个div标签</div>
    <p>HTML的全称为超文本标记语言，是一种标记语言。
        它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
        HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p>-->
</body>
</html>